<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>	
		
		<style>
				#btn_add_friend {
		        	background-color: #1aad19;
		        }
		        #btn_add_friend:active {
		            background-color: #128e12;
		        }
			</style>
		</head>
		
		<body >
		
			<header class="mui-bar mui-bar-nav title" style="position: fixed;">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left title-color"></a>
				<h1 class="mui-title title-color"><b id="chatting-nickname">详细资料</b></h1>
			</header>
			
			<div class="mui-content">
				
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell mui-media" style="padding-top: 10px;">
				        <a href="javascript:;">
				            <img id="img_friend_face" class="mui-media-object mui-pull-left" src="img/face-default-cat.png" 
				            	style="border-radius: 8%;line-height: 50px;max-width: 50px;height: 50px;">
				            <div class="mui-media-body">
				               	<label id="lab_friend_nickname"></label>
				                <p id="p_friend_username" class="mui-ellipsis"></p>
				            </div>
				        </a>
				    </li>
				</ul>
				
				<br />
				<div style="text-align: center;">
					<button id="btn_add_friend" type="button" class="mui-btn mui-btn-block" 
						style="color: white;width: 90%;display: inline;padding: 12px 0">添加好友</button>
					<button id="btn_back" type="button" class="mui-btn mui-btn-block" 
						style="width: 90%;display: inline;padding: 12px 0">返回</button>
				</div>
				
			</div>
		
        <script src="js/mui.min.js"></script>
        <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        	mui.init()
        </script>
		<script  type="text/javascript" charset="utf-8">
			
		mui.plusReady(function () {
		    var meInfo = app.getUserGlobalInfo();
			var a = plus.webview.currentWebview();
			var x = a.Friend;
			
			var img_friend_face = document.getElementById("img_friend_face");
			var lab_friend_nickname = document.getElementById("lab_friend_nickname");
			var p_friend_username = document.getElementById("p_friend_username");
		
			if(x != null) {
				var faceImage = x.faceImage;
				if(app.isNotNull(faceImage)) {
					img_friend_face.src = app.imgServerUrl + faceImage;
				}
			}
			
			
			
			lab_friend_nickname.innerHTML =x.nickname;
			p_friend_username.innerHTML = "袂信号：" + x.username;
			
			
			
			
			// 发送添加好友的请求
			var btn_add_friend = document.getElementById("btn_add_friend");
			btn_add_friend.addEventListener("tap", function(){
				
				plus.nativeUI.showWaiting("请稍后...");
				mui.ajax(app.serverUrl + "/u/addFriendRequest", {
					data:{
                        "myUserId":meInfo.id,
                        "friendUsername":x.username
                    },
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/x-www-form-urlencoded'},	              
					success:function(data){
						//服务器返回响应
						plus.nativeUI.closeWaiting();
						
						if (data.status == 200) {
							
							app.showToast("好友请求已发送...", "success");
							
							mui.openWindow({
								url: "index.html",
								id: "index.html"
							});
						} else {
							app.showToast(data.msg, "error");
						}
					}
				});
				
			});
			
			var btn_back = document.getElementById("btn_back");
			btn_back.addEventListener("tap", function() {
				mui.back();
			});
			
		})	
			
		</script>
		
	</body>

</html>
